import React, { useEffect, useRef } from 'react';
import { Button } from 'antd';

const container = document.querySelector('#container');
const root = createRoot(container);
const {
  BpmnElement,
  BpmnXmlAdapter,
  Control,
  Menu,
  SelectionSelect,
  DndPanel,
} = Extension;

const App: React.FC = () => {
  const container = useRef(null);
  const lfRef = useRef(null);

  useEffect(() => {
    lfRef.current = new LogicFlow({
      container: container.current,
      stopZoomGraph: true,
      metaKeyMultipleSelected: true,
      grid: true,
      keyboard: {
        enabled: true,
      },
      snapline: true,
      plugins: [
        BpmnElement,
        BpmnXmlAdapter,
        Control,
        Menu,
        SelectionSelect,
        DndPanel,
      ],
    });

    lfRef.current.setPatternItems([
      {
        label: '选区',
        icon: '',
        callback: () => {
          lfRef.current.openSelectionSelect();
          lfRef.current.once('selection:selected', () => {
            lfRef.current.closeSelectionSelect();
          });
        },
      },
      {
        type: 'bpmn:startEvent',
        label: '开始',
        text: '开始',
        icon: '',
      },
      {
        type: 'bpmn:userTask',
        label: '用户任务',
        text: '用户任务',
        icon: '',
      },
      {
        type: 'bpmn:serviceTask',
        label: '系统任务',
        text: '系统任务',
        icon: '',
      },
      {
        type: 'bpmn:exclusiveGateway',
        label: '条件判断',
        text: '条件判断',
        icon: '',
      },
      {
        type: 'bpmn:endEvent',
        label: '结束',
        text: '结束',
        icon: '',
      },
    ]);

    lfRef.current.render({});
  }, []);

  const download = (filename: string, text: string) => {
    const element = document.createElement('a');
    element.setAttribute(
      'href',
      'data:text/plain;charset=utf-8,' + encodeURIComponent(text),
    );
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  const downloadXml = () => {
    const data = lfRef.current.getGraphData() as string;
    download('logic-flow.xml', data);
  };

  const uploadXml = (ev: React.ChangeEvent<HTMLInputElement>) => {
    const file = ev.target.files[0];
    const reader = new FileReader();
    reader.onload = (event: ProgressEvent<FileReader>) => {
      if (event.target) {
        const xml = event.target.result as string;
        lfRef.current.render(xml);
      }
    };
    reader.readAsText(file);
  };

  return (
    <>
      <div className="explain">
        点击左下角下载 XML，将文件上传到
        <Button type="link" href="https://demo.bpmn.io/" target="_blank">
          BPMN Demo
        </Button>
        即可使用
      </div>
      <div id="graph" ref={container}></div>
      <div className="graph-io">
        <span title="下载 XML" onMouseDown={() => downloadXml()}>
          <img
            src="https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/case/bussiness/bpmn/download.png"
            alt="下载XML"
          />
        </span>
        <span id="upload-xml" title="上传 XML">
          <input
            type="file"
            className="upload"
            onChange={(ev) => uploadXml(ev)}
          />
          <img
            className="upload-img"
            src="https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/case/bussiness/bpmn/upload.png"
            alt="上传XML"
          />
        </span>
      </div>
    </>
  );
};

root.render(<App></App>);

insertCss(`
.explain {
  height: 30px;  
}
#graph {
  width: 100%;
  height: calc(100% - 30px);
}
.graph-io {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  background:rgba(255,255,255,0.8);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  padding: 10px;
  display: flex;
}
.graph-io > span {
  margin: 0 5px;
  cursor: pointer;
}
#upload-xml {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}
.upload {
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.upload::-webkit-file-upload-button {
  cursor: pointer;
}
.upload-img {
  width: 26px;
}
`);
